<template>
  <div class="timeContainer">
    <div class="topContainer">
      <el-button type="success" @click="showDialog('add')">添加</el-button>
    </div>
    <div class="mainContainer">
      <el-table :data="filterTableData" border style="width: 100%" show-overflow-tooltip>
        <el-table-column label="序号" width="70" align="center">
          <template #default="scope"> {{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="name" label="计算程序名称" />
        <el-table-column prop="url" label="url地址" width="320" />
        <el-table-column prop="endDate" label="截止时间" width="180">
          <template #default="scope">
            {{ compairTime(scope.row.endDate) ? scope.row.endDate : '已过期' }}
          </template>
        </el-table-column>
        <el-table-column width="180">
          <template #header>
            <el-input v-model="search" size="small" placeholder="输入计算程序名称搜索" />
          </template>
          <template #default="scope">
            <el-button @click="showDialog('edit', scope.row, scope.$index)">编辑</el-button>
            <el-button type="danger" @click="del('del', scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="dialogContainer">
      <el-dialog v-model="dialogVisible" :title="title" width="50%" @close="handleClose" draggable>
        <el-form :model="state.form" ref="dialogForm" :rules="state.rules" label-width="120px">
          <el-form-item label="计算程序名称" prop="name">
            <el-input v-model="state.form.name" />
          </el-form-item>
          <el-form-item label="url地址" prop="url">
            <el-input v-model="state.form.url" />
          </el-form-item>
          <el-form-item label="截止时间" prop="endDate">
            <el-date-picker
              v-model="state.form.endDate"
              type="date"
              placeholder="Pick a day"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleConfirm"> 确定 </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
  import { ref, computed, reactive } from 'vue';
  import { ElMessage, ElMessageBox } from 'element-plus';
  const search = ref('');
  const title = ref('title');
  const dialogForm = ref(null);
  const state = reactive({
    form: {
      url: 'http://www.xxx.com/web/KCFZSJ/',
    },
    rules: {
      name: [{ required: true, message: '表单参数错误', trigger: 'blur' }],
      url: [{ required: true, message: '表单参数错误', trigger: 'blur' }],
      endDate: [{ required: true, message: '表单参数错误', trigger: '' }],
    },
    tableData: [
      {
        endDate: '2023-09-03',
        name: '重力坝自重-辽宁大学',
        url: 'http://www.xxx.com/deadLoad/',
      },
      {
        endDate: '2023-08-07',
        name: '重力坝自重-南京林业大学',
        url: 'http://www.xxx.com/deadLoad/',
      },
      {
        endDate: '2023-09-02',
        name: '重力坝扬压力-新疆大学',
        url: 'http://www.xxx.com/uplift/',
      },
      {
        endDate: '2023-09-04',
        name: '重力坝静水压力-南京大学',
        url: 'http://www.xxx.com/staticWater/',
      },
      {
        endDate: '2023-09-01',
        name: '重力坝浅层抗滑稳定设计-河海大学',
        url: 'http://www.xxx.com/slidingFactor/',
      },
    ],
  });
  const dialogVisible = ref(false);

  const filterTableData = computed(() =>
    state.tableData.filter(
      (data) => !search.value || data.name.toLowerCase().includes(search.value.toLowerCase())
    )
  );
  const compairTime = (v) => {
    console.log(v);
    const now = new Date();
    const deadLine = new Date(v);
    console.log(deadLine);
    // 比较当前时间与截止时间
    if (now > deadLine) {
      console.log('已过期');
      return false;
    } else {
      console.log('未过期');
      return true;
    }
  };
  const handleClose = () => {
    resetForm();
  };
  const showDialog = (flag, v, i) => {
    if (flag == 'add') {
      title.value = '添加';
    }
    if (flag == 'edit') {
      title.value = '编辑';
    }
    dialogVisible.value = true;
    if (typeof v !== 'undefined') {
      // 第二个参数存在
      // 在这里处理第二个参数的逻辑
      state.form = JSON.parse(JSON.stringify(v));
      state.form.index = i;
    }
  };
  const del = (i) => {
    ElMessageBox.confirm('确定要删除吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning', // 可根据需要修改确认框的类型
    })
      .then(() => {
        state.tableData.splice(i, 1);
      })
      .catch(() => {});
  };
  const handleConfirm = () => {
    dialogForm.value.validate((valid) => {
      if (!valid) return;
      if (title.value == '添加') {
        state.tableData.push(state.form);
        ElMessage.success('添加成功！');
      } else {
        console.log(state.form);
        state.tableData[state.form.index] = state.form;
        ElMessage.success('修改成功！');
      }

      dialogVisible.value = false;
      console.log(tableData);
      resetForm();
    });
  };
  const resetForm = () => {
    state.form = { url: 'http://www.jrxbim.com/web/KCFZSJ/' };
  };
</script>

<style lang="scss" scoped>
  .timeContainer {
    padding: $base-main-padding;
    background-color: $base-color-white;
  }
  .mainContainer {
    margin-top: 10px;
  }
</style>
